<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">

    <title>Bootstrap 4, from LayoutIt!</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <style>
        #app{
            background-color: #d0d5d8;
        }
    </style>
</head>
<body>
<div id="app" style="padding: 100px">
    <p>{{results.title}}</p>
    <div v-for="examInfo in results.examInfos">
        <label>{{examInfo.questionTypeName}}</label>:<label>{{examInfo.questionCount}}</label><br>
    </div>
    <br>
    <br>
    <div v-for="i in results.questions.length" v-bind:id="'d'+results.questions[i-1].questionId" style="background: gray;float: left;border-radius: 50%;width: 35px;height: 30px;color: white;text-align: center;padding-top: 5px" >
        {{i}}
    </div>
    <br>
    <br>
    <hr>
            <div v-if="question.display==1">
                <p>{{(now+1)+'、'+question.content[0]}}</p>
                <div v-for="i in question.content.length-1">
                    <label><input type="radio"  v-bind:name="qName" v-bind:value="question.content[i].replace(/^\s*/g,'').substr(0,1)">{{question.content[i]}}</label>
                </div>
            </div>
            <div v-else-if="question.display==2">
                <p>{{(now+1)+'、'+question.content[0]}}</p>
                <div v-for="i in question.content.length-1">
                    <label><input type="checkbox"  v-bind:name="qName" v-bind:value="question.content[i].substr(0,1)">{{question.content[i]}}</label>
                </div>
            </div>
            <div v-else-if="question.display==3">
                <p>{{(now+1)+'、'+question.content[0]}}</p>
                <label>答:</label><input type="text" v-bind:name="qName">
            </div>

    <div style="position: absolute;top: 700px;left: 100px">
        <button @click="pre">上一题</button>
        <button @click="next">下一题</button>
        <button @click="submit">提交</button>
        <button @click="collectionExam">收藏试卷</button>
        <button @click="collectionQuestion">收藏题目</button>
        <br>
    </div>
</div>


<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            subjectId:0,
            tagsId:0,
            results:{},
            question:{},
            now:0,
            qName:"",
            score:{},
            totalScore:0
        },
        mounted:function () {
            let that=this
            that.subjectId=$.getUrlParam("subjectId")
            that.tagsId=$.getUrlParam("tagsId")
            if (that.tagsId==null){
                that.tagsId=0
            }
            $.ajax({
                type:"GET",
                url:"/question/search/generate?subjectId="+that.subjectId+"&tagsId="+that.tagsId,
                success:function (results) {
                    if(results.code==580){
                        alert(results.msg)
                        history.back()
                    }
                    that.results=results.data
                    that.question=that.results.questions[that.now]
                    that.qName="q"+that.question.questionId


                }
            })
            $("#d"+that.question.questionId)[0].style.background="green"
        },
        methods:{
            next:function () {
                let that=this
                $("#d"+that.question.questionId)[0].style.background="#5cb85c"
                let str
                if(that.question.display==1){
                    str=$("input[name="+that.qName+"]:checked").val()
                }else if(that.question.display==2){
                   $("input[name="+that.qName+"]:checked").each(function () {
                        str+=$(this).val()+"@@"
                    })
                }else if(that.question.display==3){
                    str=$("input[name="+that.qName+"]").val().replace(";","@@").replace("；","@@")
                }
                let tempQname=that.qName
                $.ajax({
                    type: "GET",
                    url:"/question/score/check?qId="+that.qName+"&myAnswer="+str,
                    success:function (result) {
                        that.score[tempQname]=result

                    }

                })

                that.now=that.now+1
                if(that.now>=that.results.questions.length){
                    alert("没有下一题了")
                    that.now=that.now-1
                }

                that.question=that.results.questions[that.now]
                that.qName="q"+that.question.questionId
                $("#d"+that.question.questionId)[0].style.background="green"
            },
            pre:function () {
                let that=this

                $("#d"+that.question.questionId)[0].style.background="#5cb85c"
                that.now=that.now-1
                if(that.now<0){
                    alert("没有上一题了")
                    that.now=that.now+1
                }

                that.question=that.results.questions[that.now]
                that.qName="q"+that.question.questionId
                $("#d"+that.question.questionId)[0].style.background="green"
            },
            submit:function () {
                let that=this


                for(s in that.score){
                    if(that.score[s]==0){

                        $("#d"+s.replace("q",""))[0].style.background="red"
                    }
                    that.totalScore=that.totalScore+that.score[s]
                }
                that.totalScore=that.totalScore*100/that.results.questions.length
                $.ajax({
                    type:"POST",
                    url:"/question/search/generate/createExam",
                    success:function (r) {
                        $.ajax({
                            type:"GET",
                            url:"/question/history/add?totalScore="+that.totalScore,
                            success:function (e) {

                            }
                        })
                    }
                })

            },
            collectionExam:function () {

                $.ajax({
                    type:"POST",
                    url:"/question/search/generate/createExam",
                    success:function (r) {
                        $.ajax({
                            type:"POST",
                            url:"/collections/examCollection/add",
                            success:function (e) {
                                alert("收藏成功")
                            }
                        })
                    }
                })
            },
            collectionQuestion:function () {
                let that=this
                $.ajax({
                    type:"POST",
                    url:"/collections/questionCollection/add?questionId="+that.question.questionId,
                    success:function (e) {
                        alert("收藏成功")
                    }
                })
            }

        }
    })
</script>
</body>
</html>